<template>
  <div>
    <div v-if="crud.props.searchToggle">
      <el-input
        type="text"
        placeholder="输入菜单名称搜索"
        style="width: 200px;"
        size="small"
        class="filter-item"
        v-model="query.menuName"
      />
      <rrOperation :crud="crud" />
    </div>
    <crudOperation :permission="permission" show="" />
    <el-table ref="table" size="small" lazy :load="getMenus" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" v-loading="crud.loading" :data="crud.data" row-key="id" @select="crud.selectChange" @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="menuName" label="名称"></el-table-column>
      <el-table-column prop="type" label="类型">
        <template  slot-scope="scope">
          <el-tag v-if="scope.row.type === 'catalog'" type="info" size="small"><i class="el-icon-folder"></i>目录</el-tag>
          <el-tag v-if="scope.row.type === 'menu'" size="small"><i class="el-icon-menu"></i>菜单</el-tag>
          <el-tag v-if="scope.row.type === 'button'" type="success" size="small"><i class="el-icon-cpu"></i>按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column  prop="sort" label="排序"></el-table-column>
      <el-table-column  prop="permission" label="权限标识"></el-table-column>
      <el-table-column  prop="icon" label="图标">
        <template slot-scope="scope">
          <el-tag>
            <i :class="scope.row.icon"></i>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column  prop="path" label="地址" width="200px"></el-table-column>
      <el-table-column  prop="isValid" label="有效性">
        <template slot-scope="scope">
          <el-switch
            :disabled="!checkPermission(['putong'])"
            v-model="scope.row.isValid"
            active-value="Y"
            inactive-value="N"
            @change="changeIsValid(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column  prop="sysCreateTime" label="创建时间" width="200px">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ parseTime(scope.row.sysCreateTime,'{y}年{m}月{d}日 {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column  prop="sysCreateUserName" label="创建人"></el-table-column>
      <el-table-column
        label="操作"
        width="125"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <udOperation :permission="permission" :data="scope.row"/>
        </template>
      </el-table-column>
    </el-table>

    <crudOption></crudOption>

  </div>
</template>
<script>
import { switchCallback } from '@/utils/index'
import crudAPI from '@/api/system/menu'
import CRUD, {presenter, header, crud} from '@/components/f-crud/f-crud'
import { rrOperation, crudOperation, udOperation } from '@/components/f-crud'
import crudOption from './option/crud-option'

export default {
  mixins: [presenter(), header(), crud()],
  components: {crudOperation, rrOperation, udOperation, crudOption},
  cruds () {
    return CRUD({title: '菜单', tree: true, url: crudAPI.list, crudMethod: { ...crudAPI }, query: {'parentMenuId': '0'}})
  },
  data () {
    return {
      permission: {
        add: ['admin', 'putong'],
        edit: ['admin', 'putong'],
        del: ['admin', 'putong']
      }
    }
  },
  created () {
    // 需要显示的头部按钮
    this.crud.optShow = {
      add: true,
      edit: true,
      del: true,
      download: true
    }
  },
  methods: {
    changeIsValid (data) {
      this.$confirm('此操作将用户有效性状态修改, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crudAPI.edit(data).then(res => {
          if (res.status === 200) {
            this.crud.editSuccessNotify('用户有效性状态修改成功')
          } else {
            data.isValid = switchCallback(data.isValid)
            this.crud.editErrorNotify('用户有效性状态修改失败')
          }
        }).catch(() => {
          data.isValid = switchCallback(data.isValid)
        })
      }).catch(() => {
        data.isValid = switchCallback(data.isValid)
      })
    },
    getMenus (tree, treeNode, resolve) {
      const params = {
        params: JSON.stringify({
          parentMenuId: tree.menuId
        })
      }
      setTimeout(() => {
        crudAPI.getMenus(params).then(res => {
          console.log(res)
          resolve(res.data)
        })
      }, 100)
    }
  }
}
</script>
<style>
</style>
